{% extends 'frontend/base.html' %}
{% block content %}
    <div class="row">
        <div class="col-12 grid-margin">
            <div class="card card-statistics">
                <div class="card-body p-0">
                    <div class="row">
                        <div class="col-md-6 col-lg-3">
                            <div class="d-flex justify-content-between border-right card-statistics-item">
                                <div>
                                    <h1>{{ total.domains }}</h1>
                                    <p class="text-muted mb-0">域名数据</p>
                                </div>
                                <i class="icon-layers text-primary icon-lg"></i>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-3">
                            <div class="d-flex justify-content-between border-right card-statistics-item">
                                <div>
                                    <h1>{{ total.ips }}</h1>
                                    <p class="text-muted mb-0">IP数据</p>
                                </div>
                                <i class="icon-people text-primary icon-lg"></i>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-3">
                            <div class="d-flex justify-content-between border-right card-statistics-item">
                                <div>
                                    <h1>{{ total.bugs }}</h1>
                                    <p class="text-muted mb-0">漏洞数量</p>
                                </div>
                                <i class="icon-pin text-primary icon-lg"></i>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-3">
                            <div class="d-flex justify-content-between card-statistics-item">
                                <div>
                                    <h1>-</h1>
                                    <p class="text-muted mb-0">插件库</p>
                                </div>
                                <i class="icon-refresh text-primary icon-lg"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">任务量报告</h4>
                    <canvas id="lineChart"></canvas>
                </div>
            </div>
        </div>
{#        <div class="col-md-6 grid-margin stretch-card">#}
{#            <div class="card">#}
{#                <div class="card-body">#}
{#                    <h4 class="card-title">服务类型</h4>#}
{#                    <canvas id="barChart"></canvas>#}
{#                </div>#}
{#            </div>#}
{#        </div>#}
        <div class="col-md-6 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">漏洞统计</h4>
                    <canvas id="doughnutChart"></canvas>
                </div>
            </div>
        </div>
    </div>
    <div class="row">

        <div class="col-md-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">运行节点</h4>
                    <p class="card-description">
                        展现扫描节点的运行状态 <span class="icon-star" style="color:#439aff;"></span>
                    </p>
                    <div class="table-responsive">
                        <table class="table running-node">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>节点名称</th>
                                <th>扫描队列</th>
                                <th>正在扫描</th>
                                <th>已完成</th>
                                <th>时间</th>
                                <th>状态</th>
                                <th>选项</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for node in nodes %}
                                <tr>
                                    <td># {{ forloop.counter }}</td>
                                    <td>{{ node.nodename }}</td>
                                    <td>
                                        <div class="badge badge-info badge-pill">{{ node.tasks }}</div>
                                    </td>
                                    <td>
                                        <div class="badge badge-primary badge-pill">{{ node.running }}</div>
                                    </td>
                                    <td>
                                        <div class="badge badge-warning badge-pill">{{ node.finished }}</div>
                                    </td>
                                    <td><span class="text-muted">{{ node.time }}</span></td>
                                    {% if node.status == "Pending" %}
                                        <td><label class="badge badge-danger">Pending</label></td>
                                    {% else %}
                                        <td><label class="badge badge-success">Running </label></td>
                                    {% endif %}

                                    <td>
                                        <button type="button" class="btn btn-light btn-sm btn-logs"
                                                data-target="{{ node.nodename }}"><i class="icon-info"></i>Logs
                                        </button>
                                        {% if node.status == "Pending" %}
                                            <button type="button" class="btn btn-light btn-sm btn-delete"
                                                    data-target="{{ node.nodename }}"><i class="icon-ban"></i>
                                                Delete
                                            </button>
                                        {% endif %}
                                    </td>
                                </tr>
                            {% endfor %}

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">任务</h4>
                    <button class="btn btn-primary btn-sm mt-3 mb-4" data-toggle="modal" data-target="#task-modal"
                            data-whatever="@mdo">新建任务
                    </button>
                    <blockquote class="blockquote blockquote-primary">
                        <p><code>POST /api/v1/scan</code></p>
                        <p>body内容为url或ip，每行一个</p>
                        <p><code>GET /api/v1/scan?t=[url|ip]</code></p>

                        <footer class="blockquote-footer">扫描API</footer>
                    </blockquote>
                </div>
            </div>
        </div>
        <div class="col-md-9 grid-margin stretch-card">
            <div class="card">
                <div class="row h-100">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <img src="/static/images/92x92.jpg" class="img-md rounded-circle mb-2"
                                 alt="profile image">
                            <div class="ml-3">
                                <h4>资产配置</h4>
                                <p class="text-muted mb-0">Developer</p>
                            </div>
                        </div>
                        <p class="mt-4 card-text">
                            在此处输入相关资产，然后你就能查询得到
                        </p>
                        <button class="btn btn-info btn-sm mt-3 mb-4" data-toggle="modal" data-target="#exampleModal-4"
                                data-whatever="@mdo">新建资产
                        </button>

                        <div class="border-top pt-3">
                            <div class="row">
                                <table class="table table-bordered zc-table">
                                    <thead>
                                    <tr>
                                        <th>
                                            #
                                        </th>
                                        <th>
                                            资产名称
                                        </th>
                                        <th>
                                            添加时间
                                        </th>
                                        <th>
                                            描述
                                        </th>
                                        <th>
                                            操作
                                        </th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for data in zc_data %}
                                        <tr>
                                            <td>
                                                {{ forloop.counter }}
                                            </td>
                                            <td>
                                                <a href="{% url 'zc-detail' data.id %}">{{ data.name }}</a>

                                            </td>
                                            <td>
                                                {{ data.add_time }}
                                            </td>
                                            <td>
                                                {{ data.descript }}
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-secondary btn-xm zc-view"
                                                        data-id="{{ data.id }}"><i class="icon-cloud-download"></i>View
                                                </button>
                                                <button type="button" class="btn btn-light btn-xm zc-delete"
                                                        data-id="{{ data.id }}"><i class="icon-refresh"></i>Delete
                                                </button>
                                            </td>
                                        </tr>
                                    {% endfor %}


                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="exampleModal-4" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel-4"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel-4">创建资产</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="recipient-name" class="col-form-label">资产名称:</label>
                            <input type="text" class="form-control" id="recipient-name">
                        </div>
                        <div class="form-group">
                            <label for="recipient-name" class="col-form-label">资产描述:</label>
                            <input type="text" class="form-control" id="recipient-desc">
                        </div>
                        <div class="form-group">
                            <label for="message-text" class="col-form-label">域名:</label>
                            <textarea class="form-control" id="domain-text" rows="4"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="message-text" class="col-form-label">IP:</label>
                            <textarea class="form-control" id="ip-text" rows="5"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success zc-create">创建</button>
                    <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="zc-update-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel-4"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel-4">查看资产</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="recipient-name" class="col-form-label">资产名称:</label>
                            <input type="text" class="form-control" id="recipient-name">
                        </div>
                        <div class="form-group">
                            <label for="recipient-name" class="col-form-label">资产描述:</label>
                            <input type="text" class="form-control" id="recipient-desc">
                        </div>
                        <div class="form-group">
                            <label for="message-text" class="col-form-label">域名:</label>
                            <textarea class="form-control" id="domain-text" rows="4"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="message-text" class="col-form-label">IP:</label>
                            <textarea class="form-control" id="ip-text" rows="5"></textarea>
                            <input type="hidden" id="zc-id" value=""/>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success zc-update">更新</button>
                    <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="task-modal" tabindex="-1" role="dialog" aria-labelledby="task-modal"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel-4">添加任务</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <textarea class="form-control" id="content-modal" rows="12"
                                      placeholder="支持多条任务，一行一个，ip或域名，ip支持CIDR表达"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success task-create">创建</button>
                    <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="node-modal" tabindex="-1" role="dialog" aria-labelledby="node-modal"
         aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel-4">节点日志</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <textarea id="shell-mode" rows="10" style="width:100%;" readonly="readonly">
                    </textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <script>
        var chart_labels = {{ data_chart.labels | safe}};
        var chart_data = {{ data_chart.data }};

        var bar_labels = {{ data_bar.labels |safe }};
        var bar_data = {{ data_bar.data }};

        var doughnut_labels =
        {{ data_bugs.labels |safe }}
        var doughnut_data =
        {{ data_bugs.data }}
    </script>
{% endblock %}
{% block extrascript %}
    <script src="/static/js/my.js"></script>
{% endblock %}
